<template>
<el-dialog width="60%" title="添加/编辑百科内容" :visible.sync="popDialog" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="petEncyclopedia" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        
        <el-form-item label="发布标题" prop="title">
          <el-input v-model="petEncyclopedia.title"></el-input>
        </el-form-item>
        <el-form-item label="发布图片" prop="图片" class="flex flex-start upload-box">
            <QiniuUpload :imageUrl="petEncyclopedia.picture" @changeImage="changeIcon"></QiniuUpload>
        </el-form-item>
         <el-form-item label="分类" prop="petTypeId">
           <el-cascader
            v-model="petEncyclopedia.petTypeId"
            :options="petTypeList"
            :props="{value:'typeId',label:'typeName',emitPath:false}"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="发布内容" prop="content">
         <Tinymce :value="petEncyclopedia.content" @input="changeHandler"> </Tinymce>
         
        </el-form-item>
         <el-form-item label="浏览数" prop="visitNumb">
            <el-input v-model="petEncyclopedia.visitNumb"></el-input>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status">
          <el-switch
            v-model="petEncyclopedia.status"
            :inactive-value="0"
            :active-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            >
          </el-switch>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="closeHandler()">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </div>
</el-dialog>
   
</template>

<script>
import {petEncyclopediaSaveUrl,petTypeListUrl} from '@/utils/common'
import QiniuUpload from '../qiniu/upload'
import Tinymce from '../tinymce/tinymce-edit-vue'
import { model, prompt } from "@/scripts/common/dialog.js"; // 引入封装的弹框

export default {
  props: {
    popDialog: {
      type: Boolean,
      default: false
    },
    popData: {
      type: Object,
      default: null
    }
  },
  watch: {
   popData() {
      this.petEncyclopedia = this.popData; 
    }
  },
  components:{Tinymce,QiniuUpload},
  data() {
    
    return {
      dialogVisible: false,
      loading: false,
      petTypeObj:[],
      petEncyclopedia: {
      },
      petTypeList:[]
    }
  },
  mounted() {
    this.loadPetType();

  },
  methods: {
    
    loadPetType(){
      const _self = this;
      this.axios.post(petTypeListUrl).then(res=>{
        if(res.data.status=="SUCCESS"&&res.data.data){
          _self.petTypeList=res.data.data
        }
      
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.savePetEncyclopedia();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    savePetEncyclopedia() { //保存宠物百科
      this.loading = true;
      this.axios
        .post(petEncyclopediaSaveUrl, this.petEncyclopedia)
        .then(res => {
          if (res.data.status == "SUCCESS") {
            this.loading = false;
            this.$emit("close");
            this.$message.success(res.data.result);
          } else {
            this.loading = false;
            this.$message.error(res.data.result);
          }
        })
        .catch(response => {
          this.loading = false;
          console.log("response - " + response);
          this.$message.error("数据保存异常失败");
        });
    },
    changeHandler(value){
      this.petEncyclopedia.content=value
    },
    changeIcon(images){
      this.petEncyclopedia.picture=images
    },
    closeHandler: function () {
      this.dialogVisible = false;
      this.$emit("close");
    },

    handleChange(value){//选择类型
      console.log(value);

    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/dialog.less";
</style>